<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>그룹과시맨틱</title>
		<!--[if lt IE 9]>
		<script src="js/html5/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>
		<h1>Block Elements</h1>
		<p style="border: 1px solid red; height: 300px">
			블럭 단위 요소
		</p>
		<h3 style="border: 1px solid orange">블럭 단위 요소</h3>
		<ul style="border: 1px solid blue">
			<li>
				블럭 단위 요소
			</li>
			<li>
				블럭 단위 요소
			</li>
			<li>
				블럭 단위 요소
			</li>
		</ul>

		<hr />
		<h1>Inline Elements</h1>
		LG전자가 안드로이드 스마트폰 최초로
		구글의 최신 운영체제(OS)인
		<b style="border: 1px solid red; height: 300px"> '킷캣(KitKat)'</b>
		업그레이드를 단행한다.

		LG전자는 지난 8월 출시한 전략폰
		<em style="border: 1px solid orange"> 'G2'</em>를 대상으로 이달 말부터 <strong style="border: 1px solid blue"> 최신 안드로이드 OS인 4.4 킷캣</strong>
		업그레이드에 들어간다고 15일 밝혔다.

		<!-- 블럭 vs 인라인 요소

		block level element
		항상 새로운 줄에서 시작되는 요소
		자동으로 줄바꿈이 되고 상하 여백이 포함
		가로크기는 부모 요소의 너비에 따라 조정
		width, height 속성으로 임의로 크기 지정가능
		div, p, ul, li, h1-h6, form, table, hr, fieldset

		inline level element
		주변 요소와 같은 줄에 나란히 나타나는 요소
		가로크기는 요소의 내용에 따라 조정
		width, height 속성으로 크기 변경 불가
		span, a, img, string, em, b, label, input, select, textarea
		-->

		<hr />
		<h1>요소 그룹화</h1>
		<div>
			<h1>Block Elements</h1>
			<p style="border: 1px solid red; height: 300px">
				블럭 단위 요소
			</p>
			<h3 style="border: 1px solid orange">블럭 단위 요소</h3>
			<ul style="border: 1px solid blue">
				<li>
					블럭 단위 요소
				</li>
				<li>
					블럭 단위 요소
				</li>
				<li>
					블럭 단위 요소
				</li>
			</ul>
		</div>

		<span> LG전자가 안드로이드 스마트폰 최초로
			구글의 최신 운영체제(OS)인 <b style="border: 1px solid red;"> '킷캣(KitKat)'</b> 업그레이드를 단행한다.

			LG전자는 지난 8월 출시한 전략폰 <em style="border: 1px solid orange"> 'G2'</em>를 대상으로 이달 말부터 <strong style="border: 1px solid blue"> 최신 안드로이드 OS인 4.4 킷캣</strong> 업그레이드에 들어간다고 15일 밝혔다. </span>

		<!-- div vs span -->
		<!--
		div : 블럭 요소 그룹화 태그
		요소들을 하나의 블록 요소로 그룹화할 수 있음
		그룹화 대상은 블럭요소와 인라인요소 모두가능
		단, p 태그는 다른 블럭요소를 포함x

		span : 인라인 요소 그룹화 태그
		요소들을 하나의 인라인 요소로 그룹화할 수 있음
		텍스트들을 서로 구분하고 싶거나 인라인 요소들만을 하나로 묶기 위해 사용

		참고 : CSS의 display 속성을 이용하면 inline 요소를 block 요소 처럼, block 요소를 inline 요소 처럼,
		inline이면서 block 요소인 것 처럼 표현할 수 있음
		-->
		<hr />
		<h1>웹페이지 레이아웃 (0) -
		테이블 태그 이용</h1>
		<table width="950" border="1" cellspacing="0" cellpadding="0">
			<tr>
				<td height="115">
				<table width="100%" border="1" cellspacing="0" cellpadding="0">
					<tr>
						<td width="15%" height="85" align="center">로고</td>
						<td align="center">배너/광고</td>
					</tr>
					<tr>
						<td height="30" colspan="2" align="center">내비게이션 메뉴</td>
					</tr>
				</table></td>
			</tr>
			<tr>
				<td height="550">
				<table width="100%" border="1" cellspacing="0" cellpadding="0">
					<tr>
						<td width="15%" height="550" align="center">메뉴바</td>
						<td align="center">본문영역</td>
					</tr>
				</table></td>
			</tr>
			<tr>
				<td height="100">
				<table width="100%" border="1" cellspacing="0" cellpadding="0">
					<tr>
						<td height="30" colspan="2" align="center">내비게이션 메뉴</td>
					</tr>
					<tr>
						<td width="15%" height="70" align="center">로고</td>
						<td align="center">저작권/연락처</td>
					</tr>
				</table></td>
			</tr>
		</table>
		<hr />
		<h1>웹페이지 레이아웃 (1) -
		그룹화 태그 이용</h1>
		
		<header>
			<h1 id="hdlogo" style="margin: 0; width: 145px; height: 85px; border: 1px solid orange; float: left">로고</h1><!-- // 로고 -->
			<div id="hdad" style="width: 805px; height: 85px; border: 1px solid blue; float: left">배너/광고</div><!-- // 배너/광고 -->
			<nav style="width: 950px; height: 30px; border: 1px solid red; clear: both">내비게이션 메뉴</nav><!-- // 내비게이션 메뉴 -->
		</header><!-- // 머릿글 영역 -->
		
		<div id="sftcontents">
			<aside style="width: 145px; height: 550px; border: 1px solid aqua; float: left" >메뉴</aside><!-- // 메뉴 영역 -->
			<section style="width: 805px; height: 550px; border: 1px solid gray; float: left ">본문</section><!-- // 본문 영역 -->
		</div><!-- // 본문글 영역 -->
		
		<footer>
			<nav style="width: 950px; height: 30px; border: 1px solid green; clear: both">내비게이션</nav><!-- // 내비게이션 영역 -->
			<h1 id="sftlogo" style="margin: 0; width: 145px; height: 70px; border: 1px solid gold; float: left">로고</h1><!-- // 로고 영역 -->
			<div id="sftcopy" style="width: 805px; height: 70px; border: 1px solid navy; float: left">저작권</div><!-- // 저작권 영역 -->
		</footer><!-- // 꼬릿글 영역 -->
		
		<!--
			전통적 레이아웃
			웹 디자이너들은 머릿글, 본문, 꼬릿글, 메뉴 등 웹 페이지와 관련있는 요소들을 그룹화하는데 div 태그를 사용했음
			div 역할을 지정하기 위해 id, class 속성 사용
			
			html5 레이아웃 요소
			hyml5 에서는 웹페이지를 여러 영역으로 나눠 의미기 있는 요소를 사용할 수 있게 함
			요소 이름으로 각 영역의 의미를 파악
			
			header
			사이트 이름, 로고, 네비게이션 메뉴를 포함하는 영역에서 사용(머릿글)
			
			footer
			개인정보취급방침, 조건, 조항, 저작권 정보를 포함하는 영역에 사용(꼬릿글)
			
			nav
			페이지 상/하단에 배치되는 주요메뉴 영역
			footer 의 개인정보취급방침, 조건, 조항들처럼 페이지 하단의 링크도 nav 요소에 포함함
			
			article
			문서나 페이지 또는 사이트의 독립적인 부분을 구성하는 구역을 의미(본문)
			중첩 사용 가능
			
			aside
			article 밖의 aside 는 전체 페이지와 관련된 컨텐츠에 대한 바구니 역할 담당
			article 내 aside 는 기사와 관련있지만 필수적이지 않은 정보 나열시 사용 
			
			section
			컨텐츠를 그룹화하는데 사용
			각 section 에는 제목이 존재해야 함
			기사가 길 경우 section 요소로 나누면 좋음
			
			이전 브라우저 지원
			이전 브라우저는 html5 시맨틱 태그 지원 x
			임시 해결책으로 html5 shiv/shim 이라는 자바 스크립트 라이브러리 사용
			IE9 이하에서만 동작하도록 조건부 주석 사용
		-->
		
		<hr style="clear: both" />
		<h1>웹페이지 레이아웃 (2) -
		시맨틱 태그 이용</h1>
		
	</body>
</html>